<!-- 父组件 ParentComponent.vue -->
<template>
  <div class="parent-container">
    <h1>用户信息面板</h1>

    <!-- 表单输入，用于更新卡片信息 -->
    <form @submit.prevent="updateUserInfo">
      <label>
        姓名：
        <input type="text" v-model="userName" v-focus />
      </label>
      <label>
        状态：
        <select v-model="userStatus">
          <option value="在线">在线</option>
          <option value="离线">离线</option>
        </select>
      </label>
      <button type="submit">更新用户卡片</button>
    </form>

    <!-- 子组件 UserCard -->
    <UserCard :name="userName" :status="userStatus" @update="handleUserUpdate" ref="userCardRef">
      <!-- 插槽，用于插入控制卡片折叠/展开的按钮 -->
      <template #actions>
        <button @click="toggleCard">{{ isCollapsed ? '展开' : '折叠' }} 卡片</button>
      </template>
    </UserCard>
  </div>
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import UserCard from './SonsonDemo/UserCard.vue'

const userName = ref('')
const userStatus = ref('')
const isCollapsed = ref(false)
const userCardRef = useTemplateRef('userCardRef')
// const infos = ref<{
//   userName: string
//   userStatus: string
// }>()
const updateUserInfo = () => {
  console.log('用户信息已更新:', userName.value, userStatus.value)
}
const toggleCard = () => {
  isCollapsed.value = !isCollapsed.value
  userCardRef.value?.xscard()
}
const handleUserUpdate = (newUpdate: string) => {
  ;(userName.value = newUpdate), (userStatus.value = newUpdate)
}
</script>

<style lang="scss" scoped>
/* 父组件 ParentComponent.vue */
.parent-container {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 10px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

button:hover {
  background-color: #0056b3;
}
</style>
